$(function() {
  var player;
  var $scenicPpotList = $('.scenic-spot-list');
  var $videoList = $('.video-list')
  var videoUrls = [
    'rtsp://admin:admin@111.20.54.130:554/cam/realmonitor?channel=1&subtype=0',
    'rtsp://111.20.141.226:9090/dss/monitor/param?cameraid=1000003%240&substream=1',
    'rtsp://admin:admin12345@111.20.141.202:8080/cam/realmonitor?channel=1&subtype=0',
    'rtsp://admin:admin@111.20.54.62:554/cam/realmonitor?channel=1&subtype=0'
  ]

  $('.city-nav').on('click', '.city-nav-item', function() {
    var $this = $(this)

    $('.city-nav-item.active').removeClass('active')
    $this.addClass('active')
    if ($this.hasClass('city-nav-item__first-level')) {
      $this.hasClass('open') ? closeSecondLevel($this) : openSecondLevel($this);
    } else if (!$this.hasClass('city-nav-item__second-level')) {
      var $openItem = $('.city-nav-item.open')
      closeSecondLevel($openItem);
    }
    if ($this.hasClass('city-nav-item__second-level')) {
      showVideoList();
    } else {
      showScenicPpotList();
    }
  })

  if (location.search.indexOf('video') >= 0) {
    $('#chengdu').click();
    $('#dujiangyan').click();
    showDialog();
    createPlayer();
  }

  $('.search-box').on('keydown', 'input', function(e) {
    if (e.keyCode === 13) {
      // todo: search
    }
  })

  function openSecondLevel($el) {
    $el.addClass('open')
    var $spotNav = $el.siblings('.scenic-spot-nav')
    $spotNav.height($spotNav.find('.city-nav-item__second-level').length * 80)
  }

  function closeSecondLevel($el) {
    $el.removeClass('open')
    var $spotNav = $el.siblings('.scenic-spot-nav')
    $spotNav.height(0)
  }

  $scenicPpotList.on('click', '.scenic-spot-box', function() {
    showVideoList();
  });

  $('.video-list').on('click', '.video-box', function() {
    showDialog();
    setDialogTitle($(this).find('figcaption > span').text())
    if (!player) {
      createPlayer();
    } else {
      player.src(videoUrls[$(this).index()]);
      player.play();
    }
  });

  $('.dialog-close-button').click(function() {
    hideDialog();
  });

  function showScenicPpotList() {
    $videoList.hide();
    $scenicPpotList.css('display', 'flex');
  }

  function showVideoList() {
    $scenicPpotList.hide();
    $videoList.css('display', 'flex');
  }

  function setDialogTitle(title) {
    $('.dialog-title').text(title)
  }

  function showDialog() {
    $('.mask').show();
    $('.dialog').show();
    $('.dialog').css('top', '50%');
  }

  function hideDialog() {
    $('.dialog').css('top', -100000);
    $('.mask').hide();
  }

  function createPlayer() {
    if (vxgplayer && vxgplayer.browserSupportsPluginPnacl()) {
      var playerId = 'vxg';
      var div = document.getElementById(playerId);
      div.setAttribute("class", "vxgplayer");
      vxgplayer(playerId, {
          url: '',
          nmf_path: 'media_player.nmf',
          nmf_src: '../pnacl/Release/media_player.nmf',
          latency: 300000,
          aspect_ratio_mode: 1,
          controls: true,
          connection_timeout: 5000,
          connection_udp: 0,
          custom_digital_zoom: false
      }).ready(function () {
          console.log(' =>ready player ' + playerId);
          player = vxgplayer(playerId)
          player.src(videoUrls[0]);
          player.play();
          console.log(' <=ready player ' + playerId);
      });
    } else {
      alert('请先安装插件')
    }
  }
})